<script setup lang="ts">
import { ruleAddFreeRuleApi, ruleEditFreeRuleApi } from '@/apis/card'
import type { RuleHandleParamsI } from '@/types/card'
import { ElMessage } from 'element-plus'
import { ref } from 'vue'

const props = defineProps(['modelValue', 'detail'])
const emit = defineEmits(['update:model-value', 'success'])
const defaultParams = {
  id: null, // 计费规则id
  ruleNumber: '', // 计费规则编号
  ruleName: '', // 计费规则名称
  freeDuration: null, // 免费时长，单位：分钟
  chargeCeiling: null, // 收费上限
  chargeType: '', // 收费类型，时长收费:duration | 按次收费:turn | 分段收费:partition
  durationTime: null, // 时长收费，单位时间
  durationPrice: null, // 时长收费，单价
  durationType: '', // 时长计费 计费方式 => minute 分钟 | hour 小时
  turnPrice: null, // 按次收费：每次价格
  partitionFrameTime: null, //分段收费:段内时间
  partitionFramePrice: null, //分段收费:段内费用
  partitionIncreaseTime: null, //分段收费:超出时间
  partitionIncreasePrice: null, //分段收费:超出范围收费价钱
}
let params = ref<RuleHandleParamsI>({
  id: undefined, // 计费规则id
  ruleNumber: '', // 计费规则编号
  ruleName: '', // 计费规则名称
  freeDuration: null, // 免费时长，单位：分钟
  chargeCeiling: null, // 收费上限
  chargeType: '', // 收费类型，时长收费:duration | 按次收费:turn | 分段收费:partition
  durationTime: null, // 时长收费，单位时间
  durationPrice: null, // 时长收费，单价
  durationType: '', // 时长计费 计费方式 => minute 分钟 | hour 小时
  turnPrice: null, // 按次收费：每次价格
  partitionFrameTime: null, //分段收费:段内时间
  partitionFramePrice: null, //分段收费:段内费用
  partitionIncreaseTime: null, //分段收费:超出时间
  partitionIncreasePrice: null, //分段收费:超出范围收费价钱
})
const rules = {
  ruleNumber: [
    { required: true, message: '请输入计费规则编号', trigger: 'blur' },
  ],
  ruleName: [
    { required: true, message: '请输入计费规则名称', trigger: 'blur' },
  ],
  chargeType: [{ required: true, message: '请选择计费方式', trigger: 'blur' }],
}
const formRef = ref()
const submitForm = async () => {
  await formRef.value.validate()

  if (params.value.id) {
    await ruleEditFreeRuleApi(params.value)
    ElMessage.success('编辑成功~')
  } else {
    await ruleAddFreeRuleApi(params.value)
    ElMessage.success('添加成功~')
  }

  closeDialog()
}
// 获取计费规则详情
const getRuleDetail = () => {
  if (props.detail) {
    params.value = { ...props.detail }
  }
}
// 关闭弹层
const closeDialog = () => {
  emit('update:model-value', false)
  emit('success')
  formRef.value.resetFields()
  params.value = { ...defaultParams }
}
</script>

<template>
  <div class="rule-dialog">
    <el-dialog
      :model-value="modelValue"
      title="添加计费规则"
      width="40%"
      @close="closeDialog"
      @open="getRuleDetail"
      top="5vh"
    >
      <el-form
        label-position="top"
        style="width: 80%; margin: 10px auto 0 auto"
        :model="params"
        :rules="rules"
        ref="formRef"
      >
        <el-form-item label="计费规则编号" prop="ruleNumber">
          <el-input
            placeholder="请输入计费规则编号"
            v-model="params.ruleNumber"
          />
        </el-form-item>
        <el-form-item label="计费规则名称" prop="ruleName">
          <el-input
            placeholder="请输入计费规则名称"
            v-model="params.ruleName"
          />
        </el-form-item>
        <el-form-item label="计费方式(全天收费)" prop="chargeType">
          <el-radio-group v-model="params.chargeType">
            <el-radio label="duration" border>时长收费</el-radio>
            <el-radio label="turn" border>按次收费</el-radio>
            <el-radio label="partition" border>分段收费</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="免费时长" style="width: 63%">
          <el-input-number
            placeholder="请输入"
            style="margin-right: 2%"
            :min="1"
            v-model="params.freeDuration"
            size="default"
          />
          <span>分钟</span>
        </el-form-item>
        <el-form-item label="收费上限" style="width: 37%">
          <el-input-number
            placeholder="请输入"
            v-model="params.chargeCeiling"
            style="margin-right: 4%"
            :min="1"
            size="default"
          />
          <span>元</span>
        </el-form-item>
        <el-form-item label="计费规则">
          <!-- 时长收费 -->
          <div class="rule" v-show="params.chargeType === 'duration'">
            <span>每</span>
            <el-input-number
              placeholder="时间"
              v-model="params.durationTime"
              style="margin: 0 2%; width: 80%"
              :min="1"
              size="default"
            />
            <el-select v-model="params.durationType" placeholder="单位">
              <el-option label="分钟" value="minute" />
              <el-option label="小时" value="hour" />
            </el-select>
            <el-input-number
              placeholder="单价"
              v-model="params.durationPrice"
              style="margin: 0 2%; width: 80%"
              :min="1"
              size="default"
            />
            <span>元</span>
          </div>
          <!-- 按次收费 -->
          <div class="rule" v-show="params.chargeType === 'turn'">
            <span>每次</span>
            <el-input-number
              placeholder="请输入金额"
              v-model="params.turnPrice"
              style="margin: 0 2%; width: 80%"
              :min="1"
              size="default"
            />
            <span>元</span>
          </div>
          <!-- 分段收费 -->
          <div v-show="params.chargeType === 'partition'">
            <!-- 段内 -->
            <div class="rule">
              <el-input-number
                placeholder="时间"
                v-model="params.partitionFrameTime"
                style="width: 25%"
                :min="1"
                size="default"
              />
              <span style="margin: 0 2%">小时内，每小时收费</span>
              <el-input-number
                placeholder="单价"
                v-model="params.partitionFramePrice"
                style="width: 25%"
                :min="1"
                size="default"
              />
              <span style="margin-left: 2%">元</span>
            </div>
            <!-- 段外 -->
            <div class="rule" style="margin-top: 20px">
              <span>每增加</span>
              <el-input-number
                placeholder="时间"
                v-model="params.partitionIncreaseTime"
                style="width: 25%; margin: 0 2%"
                :min="1"
                size="default"
              />
              <span>小时，增加</span>
              <el-input-number
                placeholder="单价"
                v-model="params.partitionIncreasePrice"
                style="width: 25%; margin: 0 2%"
                :min="1"
                size="default"
              />
              <span>元</span>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDialog">取消</el-button>
          <el-button type="primary" @click="submitForm">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.el-form {
  display: flex;
  flex-wrap: wrap;

  .el-form-item {
    width: 100%;

    // 计费方式
    .el-radio-group {
      display: flex;
      justify-content: space-between;
      width: 100%;

      .el-radio {
        margin: 0;
      }
    }

    // 计费规则
    .rule {
      display: flex;
      justify-content: space-between;
      width: 100%;
    }
  }
}
</style>
